<template>
  <cloud-dialog
    :visible="visible"
    title="提示"
    :width="800"
    :mask-closable="false"
    :before-close="handleBeforeClose">
    <div class="flex gap-x-6px items-center">
      <i-icons-success />
      <span class="text-sm text-2">
        已完成站点添加，还需要完成域名CNAME配置，CDN加速才能生效。记录如下：
      </span>
    </div>
    <a-table :data="data" :columns="columns" :pagination="false" class="my-6">
    </a-table>
    <a-button
      v-if="isFirstCheck === 0"
      type="outline"
      class="w-20 bg-white"
      plain
      :loading="resolveState.loading"
      @click="handleCheck(1)">
      检测
    </a-button>

    <div v-else class="flex gap-x-4">
      <a-button
        v-if="resolveState.resolve_status !== A_RESOLVE_TYPE.RESOLVED"
        type="outline"
        class="bg-white"
        plain
        :loading="resolveState.loading"
        @click="handleCheck(2)"
        >重新检测</a-button
      >
      <a-button
        v-if="resolveState.resolve_status == A_RESOLVE_TYPE.RESOLVED"
        type="outline"
        status="success"
        class="bg-white text-[#00B324]"
        plain>
        已验证
      </a-button>
      <basic-tips-bar
        :type="
          resolveState.resolve_status === A_RESOLVE_TYPE.RESOLVED
            ? 'success'
            : 'danger'
        "
        :text="
          resolveState.resolve_status === A_RESOLVE_TYPE.RESOLVED
            ? '已检测到DNS添加记录'
            : '未检测到DNS添加记录'
        "
        class="h-8" />
    </div>
    <template #footer>
      <a-button @click="handleBeforeClose">稍后配置</a-button>
      <a-button
        type="primary"
        :disabled="resolveState.resolve_status === 0"
        @click="handleSubmit"
        >确认</a-button
      >
    </template>
  </cloud-dialog>
</template>
<script lang="ts" setup>
import type { CreateSiteReturn } from '@/apis/model/site'
import { updateApiSiteResolveStatusApi } from '@/apis/modules/site/site'
import { A_RESOLVE_TYPE } from '@/constants'

interface IProps {
  visible: boolean
  record?: CreateSiteReturn
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false
})
interface IEmits {
  (e: 'update:visible', value: boolean): void
  (e: 'close'): void
}
const emits = defineEmits<IEmits>()
const data = computed(() => {
  return [
    {
      domain: props.record?.domain,
      resolve_type: props.record?.resolve_info?.resolve_type,
      resolve_value: props.record?.resolve_info?.resolve_value
    }
  ]
})

const columns = computed(() =>
  buildColumns([
    {
      title: '记录类型',
      dataIndex: 'resolve_type',
      width: 100
    },
    {
      title: '域名',
      dataIndex: 'domain'
    },
    {
      title: '记录值',
      dataIndex: 'resolve_value',
      format: 'copy'
    }
  ])
)
const isFirstCheck = ref(0)
const resolveState = ref({
  resolve_status: 0,
  loading: false
})
//检测 time代表是否进行检测
const handleCheck = (time: number) => {
  resolveState.value.loading = true
  updateApiSiteResolveStatusApi({ id: props.record!.id! })
    .then((res: any) => {
      resolveState.value.resolve_status = +res.resolve_status!
      isFirstCheck.value = time
      //2: 未接入 - 1: 已接入
    })
    .finally(() => (resolveState.value.loading = false))
}
const handleBeforeClose = async () => {
  emits('update:visible', false)
  emits('close')
}
async function handleSubmit() {
  handleBeforeClose()
}
</script>

<style lang="scss" scoped></style>
